<template>
  <div>
    <el-table
      :data="data"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      border
    >
      <el-table-column prop="oid" label="编号" width="100px"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="100px">
      </el-table-column>
      <el-table-column prop="phone" label="预约号码" width="120px">
      </el-table-column>
      <el-table-column prop="customer_add" label="所在省份" width="100px">
      </el-table-column>
      <el-table-column prop="order_status" label="预约状态" width="100px">
      </el-table-column>
      <el-table-column prop="tel" label="预约号码" width="120px">
      </el-table-column>
      <el-table-column prop="time" label="试驾时间" width="200px">
      </el-table-column>
      <el-table-column prop="store_add" label="门店地址"> </el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="
              dialogFormVisible = true
              handleEdit(scope)
            "
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="修改预约中心的内容"
      :visible.sync="dialogFormVisible"
      width="25%"
      :close-on-click-modal ="false"
    >
      <el-form :model="form">
        <el-form-item label="用户电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="所在省份" :label-width="formLabelWidth">
          <el-input v-model="form.customer_add" maxlength="30"></el-input>
        </el-form-item>
        <el-form-item label="试驾时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.time"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
            :picker-options="expireTimeOption"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="预约号码" :label-width="formLabelWidth">
          <el-input v-model="form.tel" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="预约状态" :label-width="formLabelWidth">
          <el-input v-model="form.order_status" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="门店地址" :label-width="formLabelWidth">
          <el-input v-model="form.store_add" maxlength="30"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button type="info" plain @click="update()">确 定</el-button>
      </div>
    </el-dialog>
    <el-button-group
      style="float: right; margin-right: 10%; border: 0; margin-top: 10px"
    >
      <el-button
        type="info"
        size="mini"
        plain
        @click="getorder(page--)"
        :disabled="isActive"
        >上一页</el-button
      >
      <el-button
        :disabled="disabled"
        type="info"
        size="mini"
        plain
        @click="getorder(page++)"
        >下一页</el-button
      >
    </el-button-group>
  </div>
</template>

<script>
import qs from "qs";
import moment from "moment";
export default {
  data() {
    return {
      disabled: false,
      page: 1,
      data: [],
      //修改弹框
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        phone: "",
        store_add: "",
        time: "",
        name: "",
        tel: "",
        order_status: "",
        oid: "",
      },
      formLabelWidth: "100px",
      // 现在之前的时间禁用
      expireTimeOption: {
        disabledDate(date) {
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000
        },
      },
    }
  },

  mounted() {
    this.getorder(1)
  },
  methods: {
    //获取
    getorder() {
      this.axios.get(`/get_orders?page=${this.page}`).then((res) => {
        // console.log(res.data.data)
        if (res.data.data.length < 10) {
          this.disabled = true
        }
        let data = res.data.data
        for (var i = 0; i < data.length; i++) {
          data[i].oid = 10000 + data[i].oid
          data[i].time = this.moment
            .unix(data[i].time / 1000)
            .format("YYYY/MM/DD HH:mm:ss")
        }
        this.data = data
      })
    },
    handleEdit(index) {
      this.form = index.row
      this.form.time = index.row.time
    },
    update() {
      if(typeof(this.form.time)=="string"){
        this.form.time=this.form.time.replace(/\//g,"-")
      this.form.time = Date.parse(new Date(this.form.time))
      }else{
        this.form.time=this.form.time.getTime()
      }
      
      this.form.oid = this.form.oid - 10000
      this.axios.post("/update_order", qs.stringify(this.form)).then((res) => {
        // console.log("res",res);
        this.form.oid=this.form.oid + 10000
        let arr = res.config.data
        let arr2 = arr.slice(arr.indexOf("time") + 5).slice(0, 12)
        // // // console.log(arr2)
        this.form.time = this.moment
          .unix(this.form.time / 1000)
          .format("YYYY/MM/DD HH:mm:ss")

          this.$notify({
          title: "成功",
          message: "这是一条成功的提示消息",
          type: "success",
        });
      })
    },
  },
  computed: {
    //当页码数到第一页时，上一页按钮禁用
    isActive() {
      this.disabled = false
      if (this.page > 1) {
        return false
      } else {
        return true
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
